<template>
  <section>
    <!--start 面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/goods'}">商品列表</el-breadcrumb-item>
        <el-breadcrumb-item>商品详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--end 面包屑-->
    <div class="goodDetailsCon">

      <div class="header-Top pd-header">
          <!--<div class="fl">{{}}</div>-->
          <div class="tr pd-top-btn">
            <span @click="updateGoodBtn"><i class="iconfont icnBtn">&#xe617;</i>修改</span>
            <span @click="delGoodBtn"><i class="iconfont icnBtn">&#xec50;</i>删除</span>
            <!--<span @click="shareGoodBtn"><i class="iconfont icnBtn">&#xe638;</i>分享</span>-->
          </div>
      </div>
      <div class="goodBox" ref="goodBox">
        <!--goodBoxTop    start-->
        <div class="goodBoxTop">
            <div class="goodBoxTL">
              <div class="goodBigImg-box">
				      	<el-carousel indicator-position="none" height="350px" :autoplay="false" arrow="never" ref="carousel">
							    <el-carousel-item v-for="(item,index) in imgData" :key="index" :name="item.name">
							      <h3 class="carouselH3" @click="showBigImg(index)"><img :src="item.fileUrl" width="100%" height="auto"/></h3>
							    </el-carousel-item>
							  </el-carousel>
              </div>
              	<i class="el-icon-arrow-left prevBtn" @click="imgUlPrevFn" v-show="'0'!=imgIndex"></i>
              	<div class="goodsSmallImgDiv">
	                <ul class="goodSmallImg" :style="{width: imgUlWidth+'px',marginLeft:imgUlMarginLeft+'px'}">
	                  <li v-for="(item,index) in imgData" @mouseenter="changeImg(index)" :class="{active:item.active}"><img :src="item.fileUrl"/></li>
	                </ul>
                </div>
              	<i class="el-icon-arrow-right nextBtn" @click="imgUlNextFn" v-show="imgData.length-1!=imgIndex"></i>

            </div>
          <div class="goodBoxTR">
            <h4 class="goodBoxTR-title" :style="{width:vue_goodsDetail_titleWidth+'px'}">{{tableData.goodsName}}</h4>
            <div class="goodBoxTR-type">
              <span>分类：{{tableData.categoryName}}</span>
              <span>品牌：{{tableData.brandName}}</span>
              <span>编码：{{tableData.goodsNo}}</span>
              <span>条形码：{{tableData.goodsBarCode}}</span>
            </div>
            <div class="goodBoxTR-money">
               <span>市场价：<i class="money-red">{{tableData.goodsSalePrice}}</i></span>
            </div>
            <div class="goodBoxTR-Model" v-for=" (sku,key) in skuMap">
              <p class="good-p">{{key}}</p>
              <!--<span class="good-green" @click="ChangeBackgroundBtn" :class="{ gray: ChangeBackground }" v-for="item in sku">{{item}}</span>-->
              <span class="good-green" @click="ChangeBackgroundBtn(key,item.valueName,item.exist)" :class="{ gray:isSelected(key,item.valueName)&&!isSkuExit(item.exist),noButton:isSkuExit(item.exist)}" v-for="item in sku">{{item.valueName}}</span>
            </div>
            <div class="goodBoxTR-standard">
              <span>计量单位：{{tableData.goodsNumUnit}}</span>
              <!--<span class="goodBoxTR-hover">
                <i>库存：{{tableData.goodsNum}}</i>
                <em class="el-icon-caret-bottom"></em>
                <div class="goodBoxTR-show">
                  <b>默认仓：0</b>
                  <b>漕河泾仓库：1</b>
                </div>
              </span>-->
            </div>
            <div class="goodBoxTR-Label">
              <span>商品标签：</span>
              <i class="goodBoxTR-tag" v-for="item in tags">{{item.ddlistName}}</i>
            </div>
          </div>
        </div>
        <!--goodBoxTop   end-->
        <!--table   start-->
        <el-tabs class="tabs-con" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="商品介绍" name="first">
            <div class="tabs-box" v-html="tableData.goodsDesc"></div>
          </el-tab-pane>
          <el-tab-pane label="售后保障" name="second">
            <div  class="tabs-box" v-html="tableData.goodsDesc1"></div>
          </el-tab-pane>
        </el-tabs>
        <!--table   end-->
      </div>

    </div>
   <!--start 图片放大-->
   <div class="bigImgWrap" v-show="bigImgShow">
   	<div class="bigImgBody">
   		<el-carousel indicator-position="none" :height="bigCarouselHeight+'px'" :autoplay="false" arrow="never" ref="bigCarousel">
		    <el-carousel-item v-for="(item,index) in imgData" :key="index" :name="item.name">
		      <h3 class="bigCarouselH3"><img :src="item.fileUrl"/></h3>
		    </el-carousel-item>
		  </el-carousel>
   		<div class="bigImgPrevBox" @click="bigImgPrevBtn"></div>
   		<div class="bigImgNextBox" @click="bigImgNextBtn"></div>
   	</div>
   	<div class="bigImgTab">
   		<i class="el-icon-arrow-left bigImgTabPrev" @click="bigImgTabPrevFn" v-show="'0'!=bigImgIndex"></i>
	  	<div class="bigImgTabDiv">
	        <ul class="bigImgTabUl" :style="{width: bigImgUlWidth+'px',marginLeft:bigImgUlMarginLeft+'px'}">
	          <li v-for="(item,index) in imgData" @mouseenter="changeBigImg(index)" :class="{active:item.bigActive}"><img :src="item.fileUrl"/></li>
	        </ul>
	    </div>
  		<i class="el-icon-arrow-right bigImgTabNext" @click="bigImgTabNextFn" v-show="imgData.length-1!=bigImgIndex"></i>
   	</div>
   	<i class="bigImgClose el-icon-close" @click="bigImgClose"></i>
   </div>
   <!--end 图片放大--> 
  </section>


</template>
<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'       //swiper插件
  export default {
  	computed:{
  		imgUlMarginLeft:function(){
  			return this.imgIndex*-60;
  		},
  		imgUlWidth:function(){
  			return this.imgData.length*60;
  		},
  		bigImgUlMarginLeft:function(){
  			return this.bigImgIndex*-60;
  		},
  		bigImgUlWidth:function(){
  			return this.imgData.length*60;
  		}
  	},
    data() {
      return {
      	vue_goodsDetail_titleWidth:0,  //商品title的宽度
        ChangeBackground:false,      //点击改变颜色
        activeName: 'first',          //tabs标签默认
        imgData:[],
        bigCarouselHeight:0,
        imgIndex:0,
        bigImgIndex:0,
        bigImgNowIndex:0,
        bigImgShow:false,
        tableData: [{                      //单条商品数据
        	goodsDesc:"",                    //商品介绍
        	goodsDesc1:"",                    //售后保障
        	goodsCode:'',                    //商品编号
          goodImg:'',                      //商品主图
          goodsNo:'',                      //商品编码
          goodsName: '',                   //商品名称
          categoryName:'',                 //商品分类
          brandName:'',                    //商品品牌
          goodsSkuValue: '',               //商品规格
          goodsSalePrice:'',               //商品价格
          goodState:'上架',
        }],
        tags:[{
        	 ddlistCode:'',                  //商品标签编号
        	 ddlistName:'',                  //商品标签
        }],
        skuMap:[],                         //商品规格集合
        saleGoodsViewVoMapSkuMap:[],       //当前商品规格
        saleGoodsViewVoSkuList:[],         //商品规格数据
      };
    },
    methods: {
    	/* start 小图片tab切换 */
    	imgUlPrevFn(){
    		this.imgIndex--;
    		this.imgIndex = this.imgIndex<0?this.imgData.length-1:this.imgIndex;
    	},
    	imgUlNextFn(){
				this.imgIndex++;
				this.imgIndex=this.imgIndex%this.imgData.length;
    	},
    	changeImg(index){
	      this.imgData.forEach((item,index,arr)=>{
	      	item.active = false;
	      });
	      this.imgData[index].active = true;
	      this.$refs.carousel.setActiveItem(index)
      },
      showBigImg(index){
      	this.bigImgNowIndex=index;
    		this.bigImgShow = true;
    		this.$refs.bigCarousel.setActiveItem(index);
    		this.imgData[index].bigActive = true;
      },
    	/* end 小图片tab切换 */
    	/* start 大图片tab切换 */
    	bigImgTabPrevFn(){
    		this.bigImgIndex--;
    		this.bigImgIndex = this.bigImgIndex<0?this.imgData.length-1:this.bigImgIndex;
    	},
    	bigImgTabNextFn(){
				this.bigImgIndex++;
				this.bigImgIndex=this.bigImgIndex%this.imgData.length;
    	},
    	bigImgPrevBtn(){
    		this.bigImgNowIndex--;
    		this.bigImgNowIndex = this.bigImgNowIndex<0?this.imgData.length-1:this.bigImgNowIndex;
    		this.imgData.forEach((item,index,arr)=>{
	      	item.bigActive = false;
	      });
	      this.imgData[this.bigImgNowIndex].bigActive = true;
	      this.$refs.bigCarousel.setActiveItem(this.bigImgNowIndex)
    	},
    	bigImgNextBtn(){
    		this.bigImgNowIndex++;
    		this.bigImgNowIndex = this.bigImgNowIndex%this.imgData.length;
    		this.imgData.forEach((item,index,arr)=>{
	      	item.bigActive = false;
	      });
	      this.imgData[this.bigImgNowIndex].bigActive = true;
	      this.$refs.bigCarousel.setActiveItem(this.bigImgNowIndex)
    	},
      changeBigImg(index){
      	this.bigImgNowIndex = index;
	  		this.imgData.forEach((item,index,arr)=>{
	      	item.bigActive = false;
	      });
	      this.imgData[index].bigActive = true;
	      this.$refs.bigCarousel.setActiveItem(index)
      },
    	bigImgClose(){
    		this.bigImgNowIndex=0;
    		this.bigImgShow = false;
    	},
    	/* end 大图片tab切换 */
//---------判断是否是选中值------------------------------
      isSelected(key,item){
      	return !(this.saleGoodsViewVoMapSkuMap[key]==item);
      },
      isSkuExit(data){
      	if(data==0||data=="0"){
      		return true;
      	}else{
      		return false;
      	}
      },
//-----------分享商品  start--------------
      shareGoodBtn(){
        const h = this.$createElement;
        this.$msgbox({
          title: '商品分享',
          message: h('div', {style: 'padding:20px;'}, [
              h('div',{style:'margin-bottom:15px'},[
                  h('span',{style:'float: left;text-align: right;display: inline-block;width: 70px;'},[
                      h('i',{style:'font-size: 14px;color: #f50;margin-right: 2px;display: inline-block;'},'*'),
                      h('span',{style:''},'分享标题')
                  ]),
                  h('textarea',{style:'border:1px #cdd9e6 solid;margin-left:10px;float:left;min-height: 70px;max-height:200px;width:360px;margin-bottom:15px;border-radius: 4px;'},"")
              ]),
            h('div',{style:'margin-bottom:15px'},[
              h('span',{style:'float: left;text-align: right;display: inline-block;width: 70px;'},[
                h('i',{style:'font-size: 14px;color: #f50;margin-right: 2px;display: inline-block;'},'*'),
                h('span',{style:''},'联系人')
              ]),
              h('input',{attrs:{class:"inputStyle",disabled:"disabled"}},"")
            ]),
            h('div',{style:'margin-bottom:15px'},[
              h('span',{style:'float: left;text-align: right;display: inline-block;width: 70px;'},[
                h('i',{style:'font-size: 14px;color: #f50;margin-right: 2px;display: inline-block;'},'*'),
                h('span',{style:''},'联系电话')
              ]),
              h('input',{attrs:{class:"inputStyle",disabled:"disabled"}},"")
            ]),

            ],
          ),
          customClass: "shareBox clearfixBox",
          cancelButtonClass: 'shareWb',
          confirmButtonClass: 'shareWx',
          showCancelButton: true,
          confirmButtonText: '分享到微信',
          cancelButtonText: '分享到微博',
        }).then(action => {
          if (action === 'confirm') {

          }
        });
      },
//-------------------------cookie   start--------------------------------
      getCookie(name){
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg)) {
          return unescape(arr[2]);
        } else {
          return null;
        }
      },
      delCookie(name){
        var exp = new Date();
        exp.setTime(exp.getTime() - 1);
        var cval = this.getCookie(name);
        if (cval != null)
          document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
      },
      setCookie(c_name, value, expiredays){
	      var exdate=new Date();
	      exdate.setDate(exdate.getDate() + expiredays);
	      document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
	    },
//-----------数字格式化转换--------------
      formatMoney  (num, n) {
          if(undefined ==  num || "" == num || null == num || "0" == num){
              return "0.00";
          }else{
            num = String(num.toFixed(n ? n : 2));
            var re = /(-?\d+)(\d{3})/;
            while (re.test(num)) num = num.replace(re, "$1,$2");
            return n ? num : num.replace(/^([0-9,]+\.[1-9])0$/, "$1").replace(/^([0-9,]+)\.00$/, "$1");
          }
      },

//-----------跳转商品修改页面------------
      updateGoodBtn(){
      	this.$router.push('/goods/updateGoods');
        this.setCookie("updateGoodsCode",this.getCookie("goodsCode"),1);
      },
//-----------删除商品  start--------------
      delGoodBtn(){
        const h = this.$createElement;
        this.$msgbox({
          title: '确认',
          message: h('div', {style: 'padding:20px;'}, [
              h('p', {style: 'text-align: center;font-size: 16px;color: #415161;text-align: center;line-height: 24px;margin-bottom: 8px;'}, '是否确认删除商品?'),
            ],
          ),
          customClass: "surePay clearfixBox",
          cancelButtonClass: 'fr',
          confirmButtonClass: 'fr',
          showCancelButton: true,
          confirmButtonText: '删除',
          cancelButtonText: '取消',
        }).then(action => {
          if (action === 'confirm') {
              this.axios({
				        method: "DELETE",
				        url: "/v3/sale/goodss/"+this.getCookie("goodsCode"),
				      }).then((res) => {
				        if (res.data.state == res.data.success) {
				        	//跳转商品列表页面
				        	this.$router.push('/goods');
				        } else {
				          alert(res.data.msg);
				        }
				
				      });
          }
        });
      },
//-----------获取商品详情-----------------
      queryViewVo(){
      	this.axios({
	        method: "get",
	        url: "/v3/sale/goodss/"+this.Public.getCookie("goodsCode"),
	        data:{},
	      }).then((res) => {
        	//价格格式化
        	res.data.list[0].goodsSalePrice = this.formatMoney(res.data.list[0].goodsSalePrice,2);
        	this.tableData = res.data.list[0];
        	this.tags = res.data.list[0].tags;
        	this.skuMap = res.data.sumInfo.skuMap;
        	this.saleGoodsViewVoMapSkuMap = res.data.list[0].saleGoodsVoMapSkuMap;
        	this.saleGoodsViewVoSkuList = res.data.sumInfo.saleGoodsVoSkuList;
        	/*获取商品图片*/
        	console.log(this.imgData);
        	if(res.data.list[0].basicFileVoList!=null&&res.data.list[0].basicFileVoList!=undefined&&res.data.list[0].basicFileVoList.length>0){
        		this.imgData = res.data.list[0].basicFileVoList;
        	}
        	console.log(this.imgData);
        	
	      }).catch((err)=>{
					 this.Public.openError(this,err.response.data)
				});
      },

//------------改变按钮颜色  start----------
      ChangeBackgroundBtn(key,item,exist){
      	if(exist==0||exist=="0"){
      		return;
      	}
      	 this.delCookie("goodsCode");
         this.saleGoodsViewVoMapSkuMap[key] = item;
         var skuValueStr = "";
         for(var key in this.saleGoodsViewVoMapSkuMap){
         	skuValueStr += key+":\r"+this.saleGoodsViewVoMapSkuMap[key]+",";
         }
         skuValueStr = skuValueStr.substring(0,skuValueStr.length-1);
         this.axios({
              method: 'patch',
              url: "/v3/sale/goodss/"+this.tableData.saleCode+"/queryDataBySku",
              data: {
              	 "goodsSkuValue":skuValueStr,
              }
        }).then((res) => {
		      	if(res.data!=null&&res.data!=undefined&&res.data!=""){
		      		this.setCookie("goodsCode",res.data.goodsCode,1);
		      	  this.queryViewVo();
		      	}
        }).catch((err)=>{
					 this.Public.openError(this,err.response.data)
				});
      },

      
//-------------tabs被选中时触发  start---------------
      handleClick(tab, event) {
        console.log(tab, event);
      }
    },
    mounted(){
    	this.vue_goodsDetail_titleWidth = document.documentElement.clientWidth-680;  //动态设置商品title的width
    	this.$refs.goodBox.style.height = document.documentElement.clientHeight-180+"px";
    	this.queryViewVo();
			this.bigCarouselHeight = document.documentElement.clientHeight-60;
    }
    
    
    
  };
</script>
<style scoped>
/*设置规格禁用*/
  .noButton{
  	background: #e4e3e3!important;
  }
  .inputStyle{
    margin-left:10px;
    float:left;
    margin-bottom:15px;
    width:360px;
    height:34px;
    border:1px #cdd9e6 solid;
    border-radius: 4px;
    background-color: #eff1f8;
    cursor: not-allowed;
  }

  .goodBoxTR-Model{
    margin-bottom: 15px;
  }

  .gray{
    color: #415161!important;
    display: inline-block!important;
    border: 1px solid #e4e3e3!important;
    padding: 8px 16px!important;
    line-height: 1em!important;
    margin-right: 10px!important;
    margin-bottom: 10px!important;
    cursor: pointer!important;
    background: white!important;
  }

  .good-p{
    color: #96a6b6;
    margin-bottom: 5px;
    margin-top: 6px;
  }

  .good-green{
    background-color: #13c19f;
    color: #fff;
    display: inline-block;
    border: 1px solid #e4e3e3;
    padding: 8px 16px!important;
    line-height: 1em;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
  }

  /*头部左侧   start*/

  .goodSmallImg li img{
    border: 1px solid #e6ecf2;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    display: inline;
  }

  .active{
    border: 1px solid #13c19f!important;
  }

  .goodSmallImg li{
    height: 60px;
    width: 60px;
    line-height: 50px;
    padding: 2px;
    border: 1px solid transparent;
    cursor: pointer;
    float: left;
  }


  .goodBigImg li img{
    max-width: 348px;
    max-height: 350px;
    vertical-align: middle;
    display: inline;
  }

  .goodBigImg li{
    float: left;
    width: 350px;
    height: 350px;
    line-height:340px;
  }

  .goodBigImg{
    width:1400px;
    height: 350px;
    float: left;
  }

  .goodBigImg-box{
    border: 1px solid #e6ecf2;
    width: 350px;
    height: 350px;
    overflow: hidden;
    float: left;
  }

  .goodBoxTL{
    width: 350px;
    height: 420px;
    float: left;
  }
  /*头部左侧   end*/
/*tabs   start*/
  .tabs-box{
  	height: auto;
  	min-height:400px;
    padding: 10px 0px;
  }

  .tabs-con{
    margin-top: 20px;
  }
/*tabs   end*/
/*头部右侧   start*/
  .goodBoxTR-Label span{
    display: inline-block;
    line-height: 1;
    padding-right: 0;
    margin-right: 0;
    margin-bottom: 10px;
    color: #96a6b6;
  }

.goodBoxTR-tag{
  color: #fff;
  background-color: #c1cbd5;
  margin-right: 10px;
  padding: 1px 10px;
  text-align: center;
  border-radius: 9px;
  font-size: 12px;
}

.goodBoxTR-show b{
  font-weight: inherit;
  width: 100%;
  line-height: 20px;
}

  .goodBoxTR-show{
    background: white;
    position: absolute;
    display: none;
    padding: 15px 20px;
    top: 18px;
    left: 0px;
    box-shadow: 0 0 6px rgba(0,0,0,.2);
  }

  .goodBoxTR-hover:hover>.goodBoxTR-show{
    display: block;
  }

  .goodBoxTR-hover:hover{
    cursor: pointer;
  }

  .goodBoxTR-hover{
    position: relative;
  }

  .el-icon-caret-bottom{
    vertical-align: middle;
    font-size: 12px!important;
    margin-left: 4px;
  }

  .goodBoxTR-standard{
   padding-bottom: 20px;
  }

  .goodBoxTR-standard span{
    color: #96a6b6;
    padding-right: 30px;
    line-height: 1.1;
    font-size: 12px;
  }

  .money-red{
    font-size: 26px;
    vertical-align: sub;
    color: #f33333;
  }

  .goodBoxTR-money{
    color: #415161;
    padding: 15px 20px;
    background-color: #f8f9fd;
    margin-bottom: 15px;
  }

.goodBoxTR-type span{
  color: #96a6b6;
  padding-right: 30px;
  line-height: 1.1;
  font-size: 12px;
}

  .goodBoxTR-type{
    margin-bottom: 15px;
  }

  .goodBoxTR-title{
    color: #415161;
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 400;
  }

  .goodBoxTR{
    padding-left: 25px;
    float: left;
  }
/*头部右侧   start*/

  .goodBoxTop{
    width: 100%;
    min-width:1278px;
    overflow: hidden;
    padding: 0px;
  }

  .goodBox{
  	overflow-y: auto;
    padding-top: 20px;
  }

  .pd-top-btn span i:hover{
    color: #13c19f!important;
  }

  .pd-top-btn span:hover{
    color: #13c19f!important;
  }

  .icnBtn{
    font-size: 14px!important;
    display: inline-block;
    vertical-align: middle;
    margin-top: -4px;
    margin-right: 4px;
  }

  .pd-header .pd-top-btn>span {
    margin-right: 30px;
    color: #7b8aa1;
    cursor: pointer;
    vertical-align: middle;
  }

  .tr {
    text-align: right;
  }
  .pd-header {
    border-bottom: 1px solid #e6ecf2;
    line-height: 30px;
  }

  .header-Top {
    padding: 8px 0;
    min-height: 50px;
  }

  div.goodDetailsCon {
    position: relative;
    flex: 1;
    width: 100%;
    background-color: #fff;
    padding: 0 20px 20px 20px;
  }

  * {
    transition: .2s;
    box-sizing: border-box;
  }
  section {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  div.location {
    flex: 0 0 10px;
    padding: 3px 0 15px 0;
  }
  /* start kael */
 .carouselH3{
 	position: relative;
 	width: 100%;
 	height: 100%;
 	cursor: pointer;
 }
 .carouselH3>img{
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%,-50%);
 }
 .goodBoxTL{
 	position: relative;
 }
 .prevBtn{
 	position: absolute;
 	bottom: 30px;
 	left: 0;
 	transform: translateY(50%);
 	cursor: pointer;
 	font-size: 18px;
 }
 .nextBtn{
 	position: absolute;
 	bottom: 30px;
 	right: 0;
 	transform: translateY(50%);
 	cursor: pointer;
 	font-size: 18px;
 }
 .prevBtn:hover{
 	color:#13c19f;
 }
 .nextBtn:hover{
 	color:#13c19f;
 }
 .goodsSmallImgDiv{
 	position: absolute;
 	bottom: 0;
 	left: 50%;
 	transform: translateX(-50%);
	height: 60px;
	width: 300px;
	overflow: hidden;
 }
 .bigImgWrap{
 	position: fixed;
 	top: 0;
 	left: 0;
 	bottom: 0;
 	right: 0;
 	margin: auto;
 	background: rgba(0,0,0,.4);
 	z-index: 9000;
 }
 .bigImgClose{
 	display: block;
 	position: absolute;
 	width: 40px;
 	height: 40px;
 	top: 20px;
 	right: 20px;
 	border-radius: 50%;
 	background: rgba(0,0,0,.7);
 	color: #fff;
 	font-size: 16px;
 	line-height: 40px;
 	text-align: center;
 	cursor: pointer;
 	z-index: 9999;
 }
 .bigImgBody{
 	position: relative;
 	width: 100%;
 	height: calc(100% - 60px);
 }
 .bigImgBody img{
 	position: absolute;
 	max-width: 100%;
 	max-height: 100%;
 	top: 50%;
 	left: 50%;
 	padding: 20px;
 	transform: translate(-50%,-50%);
 }
 .bigImgPrevBox{
 	position: absolute;
 	width: 50%;
 	height: 100%;
 	top: 0;
 	left: 0;
 	cursor: url('https://res.dinghuo123.com/dist/ydhv2/img/cursor-left.ico'),pointer;
 	z-index: 9900;
 }
 .bigImgNextBox{
 	position: absolute;
 	width: 50%;
 	height: 100%;
 	top: 0;
 	right: 0;
 	cursor: url('https://res.dinghuo123.com/dist/ydhv2/img/cursor-right.ico'),pointer;
 	z-index: 9900;
 }
 .bigImgTab{
 	position: absolute;
 	width: 540px;
 	height: 60px;
 	line-height: 60px;
 	bottom: 15px;
 	left: 50%;
 	overflow: hidden;
 	transform: translateX(-50%);
 }
 .bigImgTabDiv{
 	width: 480px;
 	height: 60px;
 	line-height: 60px;
 	margin-left: 30px;
 	overflow: hidden;
 }
 .bigImgTabUl li{
    height: 60px;
    width: 60px;
    line-height: 50px;
    padding: 2px;
    border: 1px solid transparent;
    cursor: pointer;
    float: left;
  }
  .bigImgTabUl li img{
    border: 1px solid #e6ecf2;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    display: inline;
  }
 
 
 .bigImgTabPrev {
 	position: absolute;
 	bottom: 30px;
 	left: 0;
 	transform: translateY(50%);
 	cursor: pointer;
 	font-size: 18px;
 	color: #f2f2f2;
 }
 .bigImgTabNext {
 	position: absolute;
 	bottom: 30px;
 	right: 0;
 	transform: translateY(50%);
 	cursor: pointer;
 	font-size: 18px;
 	color: #f2f2f2;
 }
 .bigImgTabPrev:hover {
 	color:#13c19f;
 }
 .bigImgTabNext:hover {
 	color:#13c19f;
 }
 /* end kael */
</style>
